import { computed, defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import Dialog from './Dialog.vue';
import Inception from './Inception.vue';
import Layout from './Layout.vue';
import Maximized from './Maximized.vue';
import Persistent from './Persistent.vue';
import Positioning from './Positioning.vue';
import Scrollable from './Scrollable.vue';
import Seamless from './Seamless.vue';
import Sizing from './Sizing.vue';
import Style from './Style.vue';
import VariousContent from './VariousContent.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Dialog</h5>
            <Dialog />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Inception</h5>
            <Inception />
          </div>
          <div class='block-'>
            <h5 class='title'>Layout</h5>
            <Layout />
          </div>
          <div class='block-'>
            <h5 class='title'>Maximized</h5>
            <Maximized />
          </div>
          <div class='block-'>
            <h5 class='title'>Persistent</h5>
            <Persistent />
          </div>
          <div class='block-'>
            <h5 class='title'>Positioning</h5>
            <Positioning />
          </div>
          <div class='block-'>
            <h5 class='title'>Scrollable</h5>
            <Scrollable />
          </div>
          <div class='block-'>
            <h5 class='title'>Seamless</h5>
            <Seamless />
          </div>
          <div class='block-'>
            <h5 class='title'>Sizing</h5>
            <Sizing />
          </div>
          <div class='block-'>
            <h5 class='title'>Style</h5>
            <Style />
          </div>
          <div class='block-'>
            <h5 class='title'>VariousContent</h5>
            <VariousContent />
          </div>
        </div>
      );
    };
  },
});
